<template>
    <view>
        <AntdZh>
            <a-table bordered :columns="columns" :data-source="tableData" :bordered="false" :loading="tableLoading"
                :pagination="false">
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.dataIndex === 'status'">
                        <!--执行状态-->
                        <a-tag color="green" v-if="record.status">启用</a-tag>
                        <a-tag color="red" v-else>停用</a-tag>

                    </template>
                    <template v-if="column.dataIndex === 'linkNodes'">
                        <!--执行状态-->
                        <a-tag color="blue" v-if="record.linkNodes.length > 0">{{ record.linkNodes[0] }}</a-tag>
                        <a-tag color="green" style="margin-left:10px" v-if="record.linkNodes.length > 1">{{ record.linkNodes[1] }}</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'eventName'">
                        <!--执行状态-->
                        <a-tag color="orange" v-if="record.invoke == 2">引擎触发</a-tag>
                        <a-tag color="cyan" v-if="record.invoke == 1">用户操作</a-tag>
                        <a-tag color="blue" v-if="record.invoke == 0">事件关联</a-tag>
                        {{ record.eventName }}
                    </template>
                    <template v-else-if="column.dataIndex === 'isAsync'">
                        <!--执行状态-->
                        <a-tag color="orange">同步</a-tag>
                     
                    </template>
                    <template v-else-if="column.dataIndex === 'eventParams'">
                        <a-popover title="详细参数">
                            <template #content>
                                <JsonEditor style="width: 400px;" v-model:value="record.eventParams" readOnly>
                                </JsonEditor>
                            </template>
                            <CodeOutlined style="color:black;font-size: 24px;"></CodeOutlined>
                        </a-popover>
                    </template>
                  
                </template>
            </a-table>
        </AntdZh>
    </view>
</template>
<script setup>
import { SafetyOutlined, FormOutlined, KeyOutlined, PlusOutlined, DeleteOutlined, DesktopOutlined, SyncOutlined, CodeOutlined } from '@ant-design/icons-vue';
import { Table as ATable } from 'ant-design-vue';
import { columns } from './EventHis.js';
const tableData = ref([
    {
        eventId: 'START_EVENT',
        eventName: '流程开始事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:1,
        linkNodes:['start']
    },
    {
        eventId: 'CHECK_EVENT',
        eventName: '流程自检事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:0,
        linkNodes:['start']
    },
    {
        eventId: 'PROCESS_EVENT',
        eventName: '流程流转事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:0,
        linkNodes:['start','rv-check']
    },
    {
        eventId: 'CHECK_EVENT',
        eventName: '流程自检事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:1,
        linkNodes:['rv-check']
    },
    {
        eventId: 'PROCESS_EVENT',
        eventName: '流程流转事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:0,
        linkNodes:['rv-check','cmd-01']
    },
    {
        eventId: 'PROCESS_EVENT',
        eventName: '流程流转事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:2,
        linkNodes:['cmd-01','cmd-02']
    },
    {
        eventId: 'PROCESS_EVENT',
        eventName: '流程流转事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:2,
        linkNodes:['cmd-02','cmd-03']
    },
    {
        eventId: 'PROCESS_EVENT',
        eventName: '流程流转事件',
        eventRange: '内部事件',
        priority: 100,
        invoke:2,
        linkNodes:['cmd-03','end']
    },

])
const tableLoading = ref(false);
</script>